<template>
  <div class="positionUser-page">
    <MainHead title="基本情况"
              @change="getPageList()" />
    <el-card class="main-card"
             shadow="never"
             v-loading="$store.state.loading">
      <div class="search">
        <div>
          <el-button type="primary"
                     icon="el-icon-plus"
                     @click="$router.push('/app-vue/villageIntroduction/add')">新增</el-button>
          <el-button @click="publicDeleteBatch">删除</el-button>
        </div>
        <div>
          <el-input style="width: 264px; margin-right: 10px"
                    placeholder="请输入关键字"
                    prefix-icon="el-icon-search"
                    v-model="formData.keyword"></el-input>
          <el-button type="primary"
                     @click="getPageList()">搜索</el-button>
          <Search :config="searchConfig"
                  @change="searchChange"
                  style="margin-left: 10px" />
        </div>
      </div>
      <el-table :data="tableData"
                style="width: 100%"
                class="page-table"
                height="calc(100vh - 65px - 60px - 30px - 172px - 119px)"
                @selection-change="publicSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index"
                         label="序号"></el-table-column>
        <el-table-column prop="rfRuralName"
                         label="农村名称"></el-table-column>
        <el-table-column prop="centerPhoto"
                         label="党群服务中心图片">
          <template slot-scope="{row}">
            <Images :url="row.centerPhoto.split(',')" />
          </template>
        </el-table-column>
        <el-table-column prop="secretaryName"
                         label="党组织书记姓名"></el-table-column>
        <el-table-column prop="secretaryPhoto"
                         label="党组织书记照片">
          <template slot-scope="{row}">
            <Images :url="row.secretaryPhoto.split(',')" />
          </template>
        </el-table-column>
        <!-- <el-table-column prop="committeeManNumber"
                         label="两委男班子数"></el-table-column>
        <el-table-column prop="committeeWomanNumber"
                         label="两委女班子数"></el-table-column> -->
        <el-table-column prop="committeeNumber"
                         label="班子/后备">
          <template slot-scope="{row}">
            <p>{{row.committeeManNumber}}/{{row.committeeWomanNumber}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="populationNumber"
                         label="总人口数"></el-table-column>
        <el-table-column prop="householdsNumber"
                         label="户数"></el-table-column>
        <el-table-column prop="residentsPopulationNumber"
                         label="常住人口数"></el-table-column>
        <el-table-column prop="floatingPopulationNumber"
                         label="流动人口数"></el-table-column>
        <el-table-column prop="registeredPopulationNumber"
                         label="户籍人口数"></el-table-column>
        <el-table-column prop="partyMemberNumber"
                         label="党员人数"></el-table-column>
        <el-table-column label="操作"
                         width="110">
          <template slot-scope="{row}">
            <el-dropdown placement="top"
                         @command="handleCommand($event, row)">
              <el-button style="padding: 0"
                         type="text">操作</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="goIndex">进入驾驶舱</el-dropdown-item>
                <el-dropdown-item command="view">查看详情</el-dropdown-item>
                <el-dropdown-item command="edit">编辑</el-dropdown-item>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer-page">
        <Page v-model="pageInfo"
              @change="getPageList()" />
      </div>
    </el-card>
  </div>
</template>
<script>
import { minxi } from '../../../mixin/index'
export default {
  mixins: [minxi],
  data () {
    return {
      formData: {}, // 搜索条件
      tableData: [], // 表格数据源
      searchConfig: { // 筛选过滤条件
        rfRuralName: {
          name: "农村名称",
          type: "input",
          placeholder: "请输入农村名称"
        }
      },
      pageInfo: { // 分页基础参数
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      searchForm: {},
      action: {
        removeDataByKey: '/ruralInfo/',
        deletes: '/ruralInfo/'
      },
      idName: 'id',
      pageListName: 'getPageList'
    }
  },
  components: {
    Page: () => import('@/components/Page')
  },
  created () {
    this.getPageList()
  },
  methods: {
    // 获取表格数据
    getPageList () {
      const { pageNo, pageSize } = this.pageInfo
      this.$Ajax(
        "/ruralInfo/page",
        "post",
        {
          pageNum: pageNo,
          pageSize: pageSize,
          ...this.formData,
          ...this.searchForm
        },
        (res) => {
          this.tableData = res.data.list
          this.pageInfo.total = res.data.total
        }
      )
    },
    handleCommand (command, row) {
      console.log(command, row)
      if (command === 'delete') {
        // 删除
        this.publicDelete(row)
      } else if (command === 'goIndex') {
        localStorage.setItem('fkRuralId', row.fkRuralId)
        this.$router.push({
          path: '/app-vue/situationMap',
          query: {
            fkRuralId: row.fkRuralId
          }
        })
      } else {
        // 编辑 查看
        localStorage.setItem('id', row.id)
        command === 'edit' ? this.$router.push('/app-vue/villageIntroduction/edit') : this.$router.push('/app-vue/villageIntroduction/view')
      }
    },
    searchChange (search) {
      this.searchForm = search
      this.pageInfo.pageNo = 1
      this.getPageList()
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
@import "@/assets/style/element-variables.scss";
</style>
